<template>
    <div class="course-list">
        <el-tabs id="statusTab" v-model="couseStatus" tab-position="top">
            <el-tab-pane label="已上架" name="1"></el-tab-pane>
            <el-tab-pane label="仓库中" name="0"></el-tab-pane>
        </el-tabs>
        <el-form ref="filterForm" :inline="true" class="filter-form" :model="filterForm" label-width="80px" size="small">
            <el-row>
                <el-form-item label="上课时间">
                    <el-col :span="24">
                        <el-date-picker type="date" value-format="yyyy-MM-dd 00:00:00" placeholder="选择日期" v-model="filterForm.startTimeStart" style="width: 100%;"></el-date-picker>
                        <span class="pl20 pr20">-</span>
                        <el-date-picker type="date" value-format="yyyy-MM-dd 23:59:59" placeholder="选择日期" v-model="filterForm.startTimeEnd" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="20">
                    <el-form-item label="课程名称">
                        <el-input v-model="filterForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="课程分类">
                        <el-select v-model="filterForm.category" placeholder="请选择课程分类">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="英语" value="1"></el-option>
                            <el-option label="健康" value="2"></el-option>
                            <el-option label="中文" value="3"></el-option>
                            <el-option label="科学" value="4"></el-option>
                            <el-option label="音乐" value="5"></el-option>
                            <el-option label="美术" value="6"></el-option>
                            <el-option label="数学" value="7"></el-option>
                            <el-option label="育儿" value="8"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button size="small" type="default" @click="resetForm">重置</el-button>
                    <el-button size="small" type="primary" @click="filterCourse">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="分类" width="100">
                <template slot-scope="{row}">
                    {{row.category | formatCategory}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <el-table-column prop="partName" label="小节名称"></el-table-column>
            <el-table-column prop="uv" label="学员人数" width="100"></el-table-column>
            <el-table-column prop="createAdmin" label="创建人" width="120"></el-table-column>
            <el-table-column prop="startTime" label="上课时间" width="120">
                <template slot-scope="{row}">
                    {{row.startTime | dateFormat('yyyy-MM-dd')}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="{row}">
                    <el-popover placement="bottom-end" title="微信扫码预览" width="200" trigger="click" popper-class="qrcode-poper">
                        <img :src="previewCodeUrl">
                        <el-button @click="preview(row.id)" type="text" size="small" slot="reference">预览</el-button>
                    </el-popover>
                    <el-button v-if="row.online == 1" @click="unshelve(row.id)" type="text" size="small" class="ml10">下架</el-button>
                    <el-button v-if="row.online == 0" @click="upshelve(row.id)" type="text" size="small" class="ml10">上架</el-button>
                    <el-button @click="editCourse(row.id)" type="text" size="small" class="ml10">编辑</el-button>
                    <el-button @click="remove(row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" v-if="totalCount > 20" :page-size="20" :total="totalCount" @current-change="pageChange"></el-pagination>
        <!-- <el-button size="mini" type="primary">新增课程</el-button> -->
    </div>
</template>

<script>
    import QRCode from 'qrcode'
    import { selectLesson, deleteLesson, updateOnline } from '@/api'
    export default {
        data() {
            return {
                couseStatus: '1',
                filterForm: {
                    startTimeStart: '',
                    startTimeEnd: '',
                    name: '',
                    category: ''
                },
                filterPms: {
                    startTimeStart: '',
                    startTimeEnd: '',
                    name: '',
                    online: '1',
                    category: '',
                    limit: 20,
                    offset: 0
                },
                totalCount: 0,
                previewCodeVisible: false,
                previewCodeUrl: '',
                tableData: []
            }
        },
        watch: {
            'couseStatus': {
                handler: function(status) {
                    // console.log(status)
                    this.tableData = []
                    this.filterForm = {
                        startTimeStart: '',
                        startTimeEnd: '',
                        name: '',
                        category: ''
                    }
                    this.filterPms = {
                        startTimeStart: '',
                        startTimeEnd: '',
                        name: '',
                        online: status,
                        category: '',
                        limit: 20,
                        offset: 0
                    }
                    this.queryCourse()
                },
                immediate: true
            }
        },
        mounted() {
            this.initNewTab()
        },
        filters: {
            formatCategory: function(v) {
                let catName = ''
                switch (v + '') {
                    case '1':
                        catName = '英语';
                        break;
                    case '2':
                        catName = '健康';
                        break;
                    case '3':
                        catName = '中文';
                        break;
                    case '4':
                        catName = 'STEM';
                        break;
                    case '5':
                        catName = '音乐';
                        break;
                    case '6':
                        catName = '艺术';
                        break;
                    case '7':
                        catName = '数学';
                        break;
                    case '8':
                        catName = '育儿';
                        break;
                }
                return catName;
            }
        },
        methods: {
            initNewTab() {
                let _t = this
                let tabWrap = window.document.querySelector('#statusTab .el-tabs__nav')
                let newTab = window.document.createElement('div')
                newTab.className = 'el-tabs__item newTabBtn'
                // let iconH = window.document.createElement('i')
                // iconH.className = 'el-icon-plus'
                // newTab.appendChild(iconH)
                newTab.innerHTML = '<button type="button" class="el-button el-button--primary el-button--mini"><span>新增课程</span></button>'
                newTab.onclick = function() {
                    window.sessionStorage.setItem('courseBaseInfo', '')
                    window.sessionStorage.setItem('courseDetailInfo', '')
                    _t.$router.push('/course/edit/base')
                }
                tabWrap.appendChild(newTab)
            },
            queryCourse() {
                selectLesson(this.filterPms).then(res => {
                    this.tableData = res.data.result.detail
                    this.totalCount = res.data.result.totalCount
                })
            },
            resetForm(){
                this.filterForm = {
                    startTimeStart: '',
                    startTimeEnd: '',
                    name: '',
                    category: ''
                }
            },
            filterCourse() {
                this.filterPms = Object.assign(this.filterPms, this.filterForm)
                this.queryCourse()
            },
            pageChange(v) {
                this.filterPms.offset = (v - 1) * 20
                window.scrollTo(0,225)
                this.queryCourse()
            },
            preview(id) {
                if (!this.previewCodeVisible) {
                    let url = window.location.protocol + '//' + window.location.host + '/front/manager.html#/detail/' + id
                    console.log(url)
                    QRCode.toDataURL(url).then(url => {
                        this.previewCodeUrl = url
                    }).catch(err => {
                        console.error(err)
                    })
                }
            },
            editCourse(id){
                window.sessionStorage.setItem('courseBaseInfo', '')
                window.sessionStorage.setItem('courseDetailInfo', '')
                this.$router.push('/course/edit/base/'+id)
            },
            unshelve(id) {
                this.$confirm('您确定要下架此课程？', '提示').then(() => {
                    updateOnline({ id, online: 0 }).then(() => {
                        this.queryCourse()
                        this.$message.success('下架成功')
                    })
                })
            },
            upshelve(id){
                this.$confirm('您确定要上架此课程？', '提示').then(() => {
                    updateOnline({ id, online: 1 }).then(() => {
                        this.queryCourse()
                        this.$message.success('上架成功')
                    })
                })
            },
            remove(id) {
                this.$confirm('您确定要删除此课程？', '提示').then(res => {
                    deleteLesson({ id }).then(res => {
                        this.queryCourse()
                        this.$message.success('删除成功')
                    })
                })
            }
        },
    }
</script>

<style lang="scss">
    .qrcode-poper.el-popover {
        text-align: center;

        img {
            width: 100%;
        }
    }
</style>

<style scoped lang="scss">
    .course-list /deep/ {
        .el-tabs__nav {
            width: 100%;
        }

        .el-tabs__item.newTabBtn {
            position: absolute;
            right: 10px;
            top: 0;
        }

        .filter-form {
            width: 900px;
            .el-date-editor.el-input{
                width: 300px!important;
            }
            .el-input{
                width: 278px!important;
            }
        }

        .el-table {
            overflow: visible;

            .el-table__body-wrapper {
                overflow: visible;
            }
        }


        .el-pagination {
            text-align: right;
            padding: 20px 5px;
        }
    }
</style>